<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.progress {
		    width: 100px;
		    height: 100px;
			border-radius: 50%;
		    background: linear-gradient(90deg, #02cb73 50%, #f2f2f2 50%);
		}
		.progress1 {
		    width: 100px;
		    height: 100px;
			border-radius: 50%;
		    background: linear-gradient(180deg, #02cb73 50%, #f2f2f2 50%);
		}
		.progress3 {
		    width: 100px;
		    height: 100px;
			border-radius: 50%;
		    background: linear-gradient(90deg, #f2f2f2 50%, transparent 50%),linear-gradient(180deg, #02cb73 50%, #f2f2f2 50%);
		}
		
		.progress4 {
		    width: 100px;
		    height: 100px;
			border-radius: 50%;
		    background: linear-gradient(90deg, #f2f2f2 50%, transparent 50%),linear-gradient(280deg, #02cb73 50%, #f2f2f2 50%);
		}
		.progress5 {
		    width: 100px;
		    height: 100px;
			border-radius: 50%;
		    background: linear-gradient(-90deg, #02cb73 50%, transparent 50%),linear-gradient(280deg, #02cb73 50%, #f2f2f2 50%);
		}
		.progress6 {
		    width: 100px;
		    height: 100px;
		    padding: 4px; 
			border-radius: 50%;
		    background: linear-gradient(-90deg, #02cb73 50%, transparent 50%),linear-gradient(280deg, #02cb73 50%, #f2f2f2 50%);
		}
		.a{
		    width: 100%;
		    height: 100%;
		    background: #ffffff;
		    border-radius: inherit;
		}
		
	</style>
	<body>
		<div class="progress"></div>
		<div class="progress1"></div>
		<div class="progress3"></div>
		<div class="progress4"></div>
		<div class="progress5"></div>
		<div class="progress6">
			<div class="a"></div>
		</div>
		
		
	</body>
	<script>
		
		function getProgress(progress){
		  if (progress > 1) progress = 1;
		  // 角度加90，对称轴变换
		  let deg = 360 * progress + 90;
		  if (deg >= 360) deg -= 360;
		  return `linear-gradient(${ progress > 0.5 ? `-90deg, #02cb73` : `90deg, #f2f2f2` }             
		  50%,transparent 50%),linear-gradient(${deg}deg, #02cb73 50%, #f2f2f2 50%)`
		}  
	</script>
</html>
